<template>
  <div>
    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" append-to-body center fullscreen>
      <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
        <el-form-item label="品种编码" prop="code">
          <el-input v-model="dataForm.code" placeholder="品种编码" :disabled="dataForm.id"></el-input>
        </el-form-item>
        <el-form-item label="品种名称" prop="name">
          <el-input v-model="dataForm.name" placeholder="品种名称"></el-input>
        </el-form-item>
        <el-form-item label="制造商" prop="supplyName">
          <el-row>
            <el-input v-model="dataForm.supplyName" placeholder="制造商" :disabled="dataForm.id">
              <el-button slot="append" :disabled="dataForm.id" @click="getSupplyDataList()">选择</el-button>
            </el-input>
          </el-row>
        </el-form-item>
        <el-row :gutter="2">
          <el-col :span="8">
            <el-form-item label="商品类别" prop="ctgId">
              <span v-if="dataForm.id">
                <el-input v-model="dataForm.ctgName" placeholder="商品类别" :disabled="dataForm.id"></el-input>
              </span>
              <span v-if="!dataForm.id">
                <el-select v-model="dataForm.ctgId" placeholder="请选择" :disabled="dataForm.id">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="dataForm.ctgId == 1">
            <el-form-item label="镜架材质" prop="frameMaterial">
              <el-select v-model="dataForm.frameMaterial" placeholder="请选择">
                <el-option v-for="item in frameMaterialData" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="dataForm.ctgId == 3">
            <el-form-item label="特殊镜片类型" prop="specialLensType">
              <el-select v-model="dataForm.specialLensType" placeholder="请选择">
                <el-option v-for="item in specialLensTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="dataForm.ctgId == 3 || dataForm.ctgId == 4 || dataForm.ctgId == 6 || dataForm.ctgId == 8">
            <el-form-item label="干预类型" prop="interventionType">
              <el-select v-model="dataForm.interventionType" placeholder="请选择">
                <el-option v-for="item in interveneType" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!--镜片-->
        <el-row :gutter="2" v-if="dataForm.ctgId == 3">
          <el-col :span="8">
            <el-form-item label="材料分类" prop="lensMaterial">
              <el-select v-model="dataForm.lensMaterial" placeholder="请选择">
                <el-option v-for="item in bizData.lensMaterial" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="镜片功能" prop="lensFunction">
              <el-select v-model="dataForm.lensFunction" placeholder="请选择">
                <el-option v-for="item in lensFunction" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row v-if="dataForm.ctgId == 3">
          <el-col :span="8">
            <el-form-item label="镜片分类" prop="photometricClassification">
              <el-select v-model="dataForm.photometricClassification" placeholder="请选择">
                <el-option v-for="item in bizData.photometricClassification" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="渐进片分类" prop="progressiveSliceClassification">
              <el-select v-model="dataForm.progressiveSliceClassification" placeholder="请选择">
                <el-option v-for="item in bizData.progressiveSliceClassification" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="dataForm.ctgId == 3">
          <el-col :span="8">
            <el-form-item label="折射率" prop="refractiveIndex">
              <el-select v-model="dataForm.refractiveIndex" placeholder="请选择">
                <el-option v-for="item in bizData.refractivityData" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16"></el-col>
        </el-row>
        <!--隐形-->
        <el-row v-if="dataForm.ctgId == 4">
          <el-col :span="8">
            <el-form-item label="使用类型" prop="useType">
              <el-select v-model="dataForm.useType" placeholder="请选择">
                <el-option v-for="item in bizData.useType" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="材质" prop="contactLensType">
              <el-select v-model="dataForm.contactLensType" :disabled="this.type == 'check'">
                <el-option v-for="item in bizData.contactLensTypeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="抛弃型分类" prop="disusedClassification">
              <el-select v-model="dataForm.disusedClassification" placeholder="请选择">
                <el-option v-for="item in bizData.disusedClassification" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="2">
          <el-col :span="8">
            <el-form-item label="单位类型" prop="unitType">
              <el-select v-model="dataForm.unitType" placeholder="请选择">
                <el-option v-for="item in unitTypeData" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="收费项目" prop="unitType">
              <el-select v-model="dataForm.payType" placeholder="请选择">
                <el-option v-for="item in bizData.payType" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="生产厂家" prop="manufacturerName">
              <el-input v-model="dataForm.manufacturerName">
                <el-button slot="append" @click="openDialog('manufactor')">选择</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="注册证号" prop="registerNum">
              <el-input v-model="dataForm.registerNum"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="2">
          <el-col :span="16">
            <el-form-item label="批号管理" prop="batchManagement">
              <el-radio-group v-model="dataForm.batchManagement">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">

          </el-col>
        </el-row>

        <el-row :gutter="2">
          <el-col :span="16">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="dataForm.status">
                <el-radio label="0">停用</el-radio>
                <el-radio label="1">启用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dataFormSubmit" :loading="ischeck" v-prevent-re-click>确定</el-button>
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :visible.sync="supply.visible">
      <el-table :data="supply.dataList" border v-loading="supply.dataListLoading">
        <el-table-column type="index" width="50">
          <template slot-scope="scope">
            <el-radio v-model="dataForm.supplyId" :label="scope.row.id" style="position: relative;left: 6px;top:-2px;"
              @change="changeSupply(scope.row)">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="供应商编码"></el-table-column>
        <el-table-column prop="name" label="供应商名称"></el-table-column>
      </el-table>
    </el-dialog>
    <search-supply v-if="supplyVisible" ref="supplyDialog" @refreshData="getSupplyData"></search-supply>
    <search-manufactor v-if="manufactorVisible" ref="manufactorDialog" @refreshData="getManuctorData"></search-manufactor>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { remote } from '@/api/admin/dict'
  import { getBrandObj, addBrandObj, putBrandObj } from '@/api/eims/brand'
  import { fetchSupplyList, getSupplyObj } from '@/api/eims/supply'
  import { fetchCtgList, getCtgObj } from '@/api/eims/ctg'

  import SearchSupply from '@/components/business/SearchSupply'
  import SearchManufactor from '@/components/business/SearchManufactor'
  export default {
    data() {
      return {
        ischeck: false,
        supply: {
          visible: false,
          dataListLoading: false,
          supplyId: '',
          dataList: []
        },
        supplyVisible: false,
        ctg: {
          dataList: []
        },
        visible: false,
        manufactorVisible: false,
        dataForm: {
          id: 0,
          name: '',
          code: '',
          ctgId: '',
          supplyId: '',
          supplyName: '',
          unitType: '',
          payType: '',
          specialLensType: '',
          frameMaterial: '',
          lensMaterial: '',
          lensFunction: "",
          photometricClassification: '',
          progressiveSliceClassification: '',
          refractiveIndex: '',
          useType: '',
          nursingLiquidType: '',
          disusedClassification: '',
          batchManagement: 0,
          status: '1'
        },
        options: [],
        specialLensTypeOptions: [],
        unitTypeData: [],
        frameMaterialData: [],
        lensFunction: [],
        interveneType: [],
        dataRule: {
          name: [{
            required: true,
            message: '品种名称不能为空',
            trigger: 'blur'
          }],
          code: [{
            required: true,
            message: '品种编码不能为空',
            trigger: 'blur'
          }],
          ctgId: [{
            required: true,
            message: '品种类别不能为空',
            trigger: 'blur'
          }],
          supplyName: [{
            required: true,
            message: '制造商不能为空'
          }]
        }
      }
    },
    computed: {
      ...mapGetters(['bizData'])
    },
    components: {
      SearchSupply,
      SearchManufactor
    },
    methods: {
      init(id) {
        for (let key in this.dataForm) {
          this.dataForm[key] = ''
        }
        this.dataForm.id = id || 0
        this.dataForm.batchManagement = 0
        this.dataForm.status = '1'
        this.options = []
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          remote('special_lens_type').then(result => {
            this.specialLensTypeOptions = result.data.data
          })
          remote('unit_type').then(result => {
            this.unitTypeData = result.data.data
          })
          remote('frame_material').then(result => {
            this.frameMaterialData = result.data.data
          })
          remote('lens_function').then(result => {
            this.lensFunction = result.data.data
          })
          remote('intervene_type').then(result => {
            this.interveneType = result.data.data
          })
          if (this.dataForm.id) {
            getBrandObj(this.dataForm.id).then(response => {
              if(response.data.code == '0'){
                let data = response.data.data
                let supplyId = data.supplyId // 供应商ID
                this.getCtgList(supplyId)
                this.dataForm = data
              }else{
                this.$message.error(response.data.msg)
              }
            })
          }
        })
      },
      //  获取制造商信息
      getSupplyData(data) {
        this.dataForm.supplyId = data.id
        this.dataForm.supplyName = data.name
        this.dataForm.ctgId = ''
        this.getCtgList(data.id)
      },

      // 表单提交
      dataFormSubmit() {
        this.ischeck = true
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.dataForm.id) {
              putBrandObj(this.dataForm).then(response => {
                if(response.data.code == '0'){
                  this.$message.success('修改成功')
                  this.visible = false
                  this.$emit('refreshDataList')
                }else{
                  this.$message.error(response.data.msg)
                }
                this.ischeck = false
              }).catch(() => {
                this.ischeck = false
              })
            } else {
              addBrandObj(this.dataForm).then(response => {
                if(response.data.code == '0'){
                  this.$message.success('添加成功')
                  this.visible = false
                  this.$emit('refreshDataList')
                }else{
                  this.$message.error(response.data.msg)
                }
                this.ischeck = false
              }).catch(() => {
                this.ischeck = false
              })
            }
          }else{
            this.ischeck = false
          }
        })
      },
      getSupplyDataList() {
        // 打开时判断有没有选择供应商
        // if(!this.dataForm.supplyId){ this.supply.supplyId = '' }
        // this.supply.visible = true
        // fetchSupplyList(Object.assign({ current: 1, size: 10000 })).then(response => {
        //   this.supply.dataList = response.data.data.records
        // });

        let data = {
          ctgId: ''
        }
        this.supplyVisible = true
        this.$nextTick(() => {
          this.$refs.supplyDialog.init(data)
        })
      },
      changeSupply(obj) {
        this.dataForm.supplyName = obj.name
        this.dataForm.supplyId = obj.id
        this.dataForm.ctgId = '' // 改变供应商时，将原品种类别清除
        this.supply.visible = false
        this.getCtgList(obj.id)
      },
      // 选择生产厂家
      openDialog(type) {
        if (type == 'manufactor') {
          this.manufactorVisible = true
          this.$nextTick(() => {
            this.$refs.manufactorDialog.init()
          })
        }
      },
      // 获取生产厂家信息
      getManuctorData(data) {
        this.$set(this.dataForm, 'manufacturerId', data.id)
        this.$set(this.dataForm, 'manufacturerName', data.name)
        this.dataForm = { ...this.dataForm
        }
      },
      // 根据供应商ID获取商品类别列表
      getCtgList(id) {
        getSupplyObj(id).then(response => {
          if(response.data.code == '0'){
            let ctgData = response.data.data.list
            let list = []
            ctgData.forEach(item => {
              let ctgObj = {
                value: item.ctgId,
                label: item.ctgName
              }
              list.push(ctgObj)
            })
            this.options = list
          }else{
            this.$message.error(response.data.mag)
          }
        })
      }
    }
  }
</script>
